<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="studystat.*" %>
<%@ page import="java.util.List" %>

<html>

<head>
    <Title>Home</Title>
    <%
   	 	UserService userService = UserServiceFactory.getUserService();
    	User user = userService.getCurrentUser();
    	
	%>
		<link rel="stylesheet" href="customThemeJ/themes/StudyStatTheme1.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />	
		<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
		<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
		<%if(user != null){ %>
    <script type="text/javascript">
    	function showOnlyElement(e) {
    		if(e == "#studie"){
    			if(validateStudie()){
    				hideAll();
    				$(e).show("slow");
    			}
    		}
    		else if(e == ("#sport")){
    			if(validateSport()){
    				hideAll();
    				$(e).show("slow");
    			}
    		}
    		else if(e == ("#slaap")) {
    			if(validateSlaap()){
    				hideAll();
    				$(e).show("slow");
    			}
    		}
    		else {
    			hideAll();
    			$(e).show("slow");
    		}
    	}
    	function hideAll(){
    		$("#welcome").hide();
    		$("#studie").hide();
    		$("#sport").hide();
    		$("#slaap").hide();
    	}
    	
		function getVakken() 
		{
			<%
				List<Vak> vakkenlijst1 = StudentManager.getInstance().getStudent(user.getUserId()).getVakken();
			%>

			var str = "Welk vak wilt u studeren? <br /><select name=\"vak\">";
			<%
				String name;
				for (Vak vak : vakkenlijst1)
				{ 
					name = vak.getNaam(); %>
					str += "<option value=\"" + "<%= name %>" + "\">" + "<%= name %>" +  "<\/ option \>";
					<%
				}
			%>
			str += "</select>";
			document.getElementById("vakkencheck").innerHTML = str;
		}
		
		function validateSlaap() {
			var ret = true;
			<%Student student = StudentManager.getInstance().getStudent(user.getUserId());
			// Als er nog een activiteit bezig is
			Activiteit acti = student.getNietGestopteActiviteit();
			if (acti !=null) { 
				if(!(acti instanceof studystat.Slaap)) {%>
					ret = false;
					alert("U bent reeds met een andere <%= acti.getClass().getSimpleName().toLowerCase() %>-activiteit bezig");
				<%}
			}
			%>
			if (isNaN(document.getElementById("uren").value)) {
				alert("De input die u gegeven heeft is niet geldig");
				ret = false;
			}
			else if(document.getElementById("uren").value < 0){
				alert("De input die u gegeven heeft is niet geldig");
				ret = false;
			}
			return ret;
		}
		
		function validateStudie() {
			var ret = true;
			<%Student studentt = StudentManager.getInstance().getStudent(user.getUserId());
			// Als er nog een activiteit bezig is
			Activiteit actit = student.getNietGestopteActiviteit();
			if (actit !=null) { 
				if(actit.getStopTijd() != null) {%>
					ret = false;
					alert("U moet uw form nog invullen");
					window.location = "/login";
				<%}
				else if(actit instanceof studystat.Sport){ %>
					ret = false;
					alert("U bent reeds met een andere <%= acti.getClass().getSimpleName().toLowerCase() %>-activiteit bezig");
				<%}
				else {
					if(actit.getStopTijd() == null){
					%>
					window.location = "timerstudie.jsp";
					ret = false;
					<%
					}
					else {
						%>
						window.location = "studieform.jsp";
						ret = false;	
						<%
					}
				}
			}
			%>
			return ret;
		}
		function validateSport() {
			var ret = true;
			<%Student studenttt = StudentManager.getInstance().getStudent(user.getUserId());
			// Als er nog een activiteit bezig is
			Activiteit actitt = student.getNietGestopteActiviteit();
			if (actitt !=null) { 
				if(actit.getStopTijd() != null) {%>
				ret = false;
				alert("U moet uw form nog invullen");
				window.location = "/login";
			<%}
			else if(actit instanceof studystat.Studie){ %>
				ret = false;
				alert("U bent reeds met een andere <%= acti.getClass().getSimpleName().toLowerCase() %>-activiteit bezig");
			<%}
			else {
				if(actit.getStopTijd() == null){
				%>
				window.location = "timersport.jsp";
				ret = false;
				<%
				}
				else {
					%>
					window.location = "sportform.jsp";
					ret = false;	
					<%
				}
				}
			}
			%>
			return ret;
		}
		
		$(document).ready(function () {
			  showOnlyElement("#welcome");
			});
    </script>
    
    <% } %>
</head>
  
<body>
<div data-role="page" data-theme="b">
	
	<!-- Titelbalk -->
	<div data-role="header" data-position="inline" data-theme="b">
	<a href="achievement.jsp" data-icon="star" class="ui-btn-left" rel="external">Achievements</a>
	<h1>The Real Study Stat</h1>
	<a href="option.jsp" data-icon="gear" class="ui-btn-right" rel="external">Options</a>
	<div data-role="navbar">
		<ul>
			<li><a href="" rel="external">Home</a></li>
			<li><a href="statistieken.jsp" rel="external">Statistieken</a></li>
			<li><a href="contact.html" rel="external">Contact</a></li>
			<li><a href="about.html" rel="external">Over Ons</a></li>
			<li><a href="<%= userService.createLogoutURL("/login") %>" rel="external">Uitloggen</a></li>
		</ul>
	</div>
	</div>
	
	<div data-role="content">
	<%
    	if (user != null) {
	%>
	<div class="ui-grid-b">
		<div data-role="controlgroup" class="ui-block-a" id="keuzemenu" style="width: 15%">
			<a onClick="showOnlyElement('#welcome')" data-role="button">Welkom</a>
			<a onClick="showOnlyElement('#studie')" data-role="button">Studie opmeten</a>
			<a onClick="showOnlyElement('#sport')" data-role="button">Sport opmeten</a>
			<a onClick="showOnlyElement('#slaap')" data-role="button">Slaap ingeven</a>
		</div>
		
		<div class="ui-block-b" style="width:5%"></div>
		
		<div class="ui-block-c" id="content" style="width: 80%">
			<div id = "welcome">
				<h1>Welkom, <%= StudentManager.getInstance().getStudent(user.getUserId()).getVoornaam() %></h1>
				<p>Dit is een project van CWB4 voor P&O. Bedankt voor het gebruiken van onze applicatie.</p>
				<p>Om te beginnen, maak hier links een keuze.</p>
			</div>	
			<div id = "studie">
				<h2>Studie opmeten</h2>
				<form id="studieform" action="/opmeten" method="post" onload="studieFill()" data-ajax="false" onSubmit="return validateStudie()"> 
					<div id="vak">
								<div id="vakkencheck">
								</div>
								<script type="text/javascript"> 
									getVakken();
								</script>	
					</div>
					<legend>Studeert u samen met anderen?</legend>
					<div data-role="fieldcontain">
 						<fieldset data-role="controlgroup">
						<input type="checkbox" name="samen" id="samen"/>
						<label for="samen">Ja</label>
    					</fieldset>
					</div>
					<label for="plaats">Waar gaat u studeren?</label>
					<select type="select" name="plaats" /><br/>
						<option value="kot">Kot</option>
						<option value="campus">Campus</option>
						<option value="bib">Bibliotheek</option>
						<option value="thuis">Thuis</option>
						<option value="jet">Privé-Jet</option>
						<option value="andere">Andere</option>
					</select>	
					<input type="hidden" name="userID" value= "<%= user.getUserId() %>"/>
					<input type="hidden" name="type" value= "studie"/>
					<input type="submit" value="Start" name="start" />
				</form>
			</div>
			<div id = "sport">
				<h2>Sport opmeten</h2>
				<form id="sportform" action="/opmeten" method="post" data-ajax="false" onSubmit="return validateSport()">
					<label for="welke">Welke sport gaat u beoefenen? (optioneel)</label>
					<input name="welke" type="text"/><br/>
					<input type="hidden" name="userID" value = "<%= user.getUserId() %>"/>
					<input type="hidden" name="type" value = "sport"/>
					<input type="submit" value="Start" name="start" />
				</form>
				
			</div>
			<div id = "slaap">
				<h2>Slaap opmeten</h2>
				<p>Op deze pagina kan u aangeven hoe lang u gisteren geslapen heeft.</p>
				<form id="slaapform" action="/opmeten" method="post" onSubmit="return validateSlaap()" data-ajax="false">
					<input type="text" name="uren" id="uren"/>
					<input type="hidden" name="userID" value = "<%= user.getUserId() %>"/>
					<input type="hidden" name="type" value = "slaap"/>
					<input type="submit" value="Doorsturen" name="start" />
				</form>
			</div>
		</div>
	</div>
	<% 
    	} else {
	%>
		<div id="content">
		<p><a href="<%= userService.createLoginURL(request.getRequestURI()) %>">Log in om verder te gaan</a></p>
		</div>
	<%
    	}
	%>

  </div><!-- content end -->
  </div><!-- page end -->
  </body>
</html>
